<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue3 单文件组合式实例模板</title>
    <script type="importmap">
        {
          "imports": {
            "vue": "https://unpkg.com/vue@3.3.4/dist/vue.esm-browser.js",
            "vue/server-renderer": "https://unpkg.com/@vue/server-renderer@3.3.4/dist/server-renderer.esm-browser.js"
          }
        }
    </script>
    <style>
        button, a {
            display: block;
            margin-bottom: 1em;
        }
    </style>

</head>

<body>
<script type="module">
    import {createApp, ref, computed,version} from 'vue'

    createApp({
        setup() {
            const message = ref('Hello World!')

            function reverseMessage() {
                // 通过其 .value 属性
                // 访问/修改一个 ref 的值。
                message.value = message.value.split('').reverse().join('')
            }

            function notify() {
                alert('navigation was prevented.')
            }

            return {
                version,
                sum: computed(() => 100),
                message,
                reverseMessage,
                notify,
                pf(i) {
                    return i * i
                },
                lf: i => i * i * i
            }
        }
    }).mount('#app')
</script>

<div id="app">
    <!--
      注意我们不需要在模板中写 .value，
      因为在模板中 ref 会自动“解包”。
    -->
    <h1>{{ message }} Vue {{version}}</h1>

    <!-- 调用方法表达式 -->
    <p>{{pf(3)}}</p>
    <p>{{lf(3)}}</p>

    <!-- 计算属性 -->
    <p>{{sum}}</p>

    <!--
      绑定到一个方法/函数。
      这个 @click 语法是 v-on:click 的简写。
    -->
    <button @click="reverseMessage">Reverse Message</button>

    <!-- 也可以写成一个内联表达式语句 -->
    <button @click="message += '!'">Append "!"</button>

    <!--
    e.preventDefault() 阻止标签的默认事件 e.stopPropagation()停止事件冒泡传播
      Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()
      这样的常见任务提供了修饰符。
    -->
    <a href="https://vuejs.org" @click.prevent="notify">
        A link with e.preventDefault()
    </a>
</div>
</body>
</html>
